﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用户登录</title>
    <link href="css/blog_login.css" rel="stylesheet" type="text/css" media="all">
    <script src="/js/axios.min.js"></script>
    <script src="/js/jQuery_3.6.0.min.js"></script>
    <script src="/js/vue.min.js"></script>

</head>

<body>
<div id="registerdiv">
    <div id="head">
    </div>


    <div id="body">
        <div class="top1">
            <ul>
                <li>登 陆</li>
            </ul>
            <hr class="hr1"/>
        </div>
        <div class="valueDate">
            <!--<p>&nbsp;&nbsp;验证码必须填写</p>-->
            <p>&nbsp;&nbsp;用户名必须填写</p>
            <p>&nbsp;&nbsp;密码必须填写</p>
        </div>
        <div class="login">
            <h1>注册</h1>
            <div class="content">
                <p><span>用户名</span> *<br/><input id="username" name="username" v-model="username" @blur="checkuserid()"
                                                 type="text" class="t_input" size="50"/></p>
                <p><span>密码</span> *<br/><input name="password" v-model="password" type="password" class="t_input"
                                                size="50"/></p>
                <!--<p><span>验证码</span> * <img src="#" /><br /><input name="" type="text" class="t_input" size="50"/></p>
                <p><input name="" type="checkbox" value="" />让系统记住我</p>-->
                <p><input name="" type="button" value="提交" @click="userregister()"/>
                    <!-- <a href="blog_register.html">我要注册</a></p>-->
                <p></p>
            </div>
        </div>
    </div>

    <div id="foot">
        <hr/>
        <center>Copyright &copy; 2013-2020</center>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#registerdiv",
        data: {
            username: '',
            password: ''
        },
        methods: {
            userregister: function () {
                //利用ajax 从后台加载数据
                var path = "/blogUser";
                var param = {
                    username: vm.username,
                    password: vm.password
                };
                axios.post(path, param).then(function (obj) {
                    if (obj.status == 200) {
                        var pageResult = obj.data;
                        //alert(pageResult.msg);
                        alert("添加成功");
                        location.href = "/blog_login.html";
                    }
                }).catch(function () {
                    //有问题函数
                    alert("错误")
                });
            },
            checkuserid: function () {
                var path = "/checkUserId?username=" + vm.username;
                axios.get(path, null).then(function (obj) {
                    if (obj.status == 200) {
                        var pageResult = obj.data;
                        if (pageResult.code == 100) {
                            alert("用户名已存在");
                            return;
                        }
                    }
                }).catch(function () {
                    //有问题函数
                    alert("错误")
                });
            }
        }
    });
</script>
</body>

</html>
